<template>
  <div class="home" >
    <!-- <swiper-list :list="list" :isfull="true"></swiper-list> -->
    <ul class="mui-table-view mui-grid-view mui-grid-9">
        <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
          <router-link to="/home/newslist">
          <img src="../../img/menu1.png" alt="">
          <div class="mui-media-body">新闻资讯</div></router-link></li>
        <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
          <router-link to="/home/photolist">
          <img src="../../img/menu2.png" alt="">
          <div class="mui-media-body">图片分享</div></router-link></li>
        <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
          <router-link to="/home/goodslist">
          <img src="../../img/menu3.png" alt="">
          <div class="mui-media-body">商品购买</div></router-link></li>
        <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
          <img src="../../img/menu4.png" alt="">
          <div class="mui-media-body">留言反馈</div></a></li>
        <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
          <img src="../../img/menu5.png" alt="">
          <div class="mui-media-body">视频专区</div></a></li>
        <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
          <img src="../../img/menu6.png" alt="">
          <div class="mui-media-body">联系我们</div></a></li>
      </ul>
      <div>
      <span class="hot1">特价专区</span><span class="hot" @click="getMore">换一批></span>
      </div>
      <template>
    <div>
      <div class="goods-list" >
        <div class="goods-item" v-for="item in goodsList" :key="item.id" @click="goDetail(item.id)">
          <img :src="item.picUrl">
          <h1 class="goods-title">
            {{item.title}}
          </h1>
          <div class="goods-info">
            <div class="price">
              <span class="new">￥{{item.retailPrice}}</span>
              <span class="old">￥{{item.counterPrice}}</span>
            </div>
            <div class="sell">
              <span>热卖中</span>
              <span class="save">剩{{item.sortOrder}}件</span>
            </div>
          </div>
        </div>
      </div>
    </div>
</template>
  </div>
</template>

<script>
// import axios from 'axios'
// import { postTest } from '@/api/api'
import { getSwiperList } from '@/api/api'
import SwiperList from '../subcomponents/swiper'
export default {
  name: 'home',
  components: {
    SwiperList
  },
  data () {
    return {
      list: [],
      goodsList:[],
      pageNo:1,
      pageSize:6
    }
  },
  methods: {
        getMore() {
        this.pageNo++;
        this.createGoods();
      },
     goDetail(id) {
        this.$router.push("/home/goodsinfo/"+id)
        // this.$router.push({path:"/home/goodsinfo/"+id})
        // this.$router.push({name:'goodsinfo',params:{id:id}})
      },
    createGoods(){
         var $this=this;
        this.axios({
        method:'get',
        url: "http://localhost:8083/goods/hot",
        params:{pageNo:this.pageNo,pageSize:this.pageSize}
      }).then(function(res){
          console.log(res);
          $this.goodsList=res.data.obj.list;
      });
      },
    getSwipe () {
      getSwiperList()
        .then(res => {
          this.list = ["http://yanxuan.nosdn.127.net/8c93cef435d888bd79833777df1cd0c2.png","http://yanxuan.nosdn.127.net/8c93cef435d888bd79833777df1cd0c2.png"]
          // console.log(res)
        })
        .catch(error => {
          console.log(error)
        })
      // postTest(1)
      //   .then(res => {
      //     console.log(res)
      //   }).catch(error => {
      //     console.log(error)
      //   })
    }
  },
  created () {
    this.getSwipe();
    this.createGoods()
  }
}
</script>
<style lang="scss" scoped>
  .hot{
    float: left;
    color: blue;
    font-size: 10px;
  }
  .hot{
    float: right;
  }
  .mui-grid-view.mui-grid-9 {
    background-color: #fff;
    border: none;
    img {
      width: 60px;
      height: 60px;
    }

  }
  .mui-grid-view.mui-grid-9 .mui-table-view-cell {
    border: none;
    .mui-media-body {
      font-size: 13px;
    }
  }
</style>

<style scoped lang="scss">
  .goods-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 7px;
    .goods-item {
      width: 49%;
      border: 1px solid #ccc;
      box-shadow: 0 0 5px #ccc;
      margin-bottom: 10px;
      padding:2px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      min-height: 290px;
      img{
        width: 100%;
      }
      .goods-title {
        font-size: 14px;
        padding:0 2px;
      }
      .goods-info {
        background-color: #eee;
        padding:0 5px;
        .price {
          .new {
            color: red;
            font-size: 16px;
            margin-right: 10px;
          }
          .old {
            color: #bbb;
            text-decoration: line-through;
            font-size: 12px;
          }
        }
        .sell {
          margin: 3px;
          font-size: 12px;
          color: #8f8f94;
          display: flex;
          justify-content: space-between;
        }
      }
    }
  }
</style>
